<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--   绝对定位基于xxx定位，上下左右
       1，在没有父级元素定位的前提下，相对于浏览器定位
       2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移
       3.在父级元素范围内移动
         相对与父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会保留

-->
    <style>
        body{
            padding:60px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 10px;
            line-height: 25px;
        }
        #father{
            border: 1px solid black;
            padding: 0px;
            /*假设父级元素存在定位，我们通常会相对于父级元素进行偏移*/
            position: relative;
        }
        #first{
            background-color: #969896;
            border: 1px dashed #ce4444;


        }
        #second{
            background-color: #8a8659;
            border: 1px dashed rgb(204, 20, 218);
            position: absolute;
            right:30px;

        }
        #third{
            background-color: #a273a6;
            border: 1px dashed #5ec51f;
            position: relative;

        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>